<template>
	<div class="thePage">
		<router-link class="navItem" v-for="(item,i) in navList" :key="i" :to="item.path">{{item.title}} | </router-link>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				navList: [{
						path: "/",
						title: "Home"
					},
					{
						path: "/todo",
						title: "Todo案例"
					},
					{
						path: "/learn",
						title: "学习计划"
					},
					{
						path: "/goodsManage",
						title: "商品管理"
					},
					{
						path: "/pm25",
						title: "PM25"
					},
					{
						path: "/telphone",
						title: "电话号码检验"
					},
					{
						path: "/productList",
						title: "商品列表"
					}

				]
			}
		}
	}
</script>

<style scoped>
	.thePage {
		padding: 10px 0;
		background-color: bisque;
		display: inline;
	}

	.navItem {
		padding: 0 10px;
	}
</style>